pure javasript code for recatcha on serverless apps

insert this into your html page:

1
2
<div id="captcha_container"></div>
<button onclick='validate()'>Validate reCAPTCHA</button>

css style :

1
2
3
4
5
6
7
8
9
10
<style>
    msg-error {
    color: #c65848;
    }
    .g-recaptcha.error {
    border: solid 2px #c64848;
    padding: .2em;
    width: 19em;
    }
</style>

and this is javascript for rendering google recaptcha & validation it. put it Your sitekey for value of google recaptcha sitekey

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    var captchaContainer = null;
    var loadCaptcha = function() {
        captchaContainer = grecaptcha.render('captcha_container', {
            'sitekey' : 'Your sitekey',
            'callback' : function(response) {
            console.log(response);
            }
        });
    };

    function validate(){
        response = grecaptcha.getResponse();
        if (response.length === 0) {
            console.log('err : invalidate')
        } else {
            console.log('succ: validated')
        }
    }
</script>


<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>